import React, { useRef } from 'react'
import "./Headerbar.css"
import { useNavigate } from 'react-router-dom'
import CommonSearchBar from '../SearchBar'
import { Grid } from 'antd-mobile'



const HeaderNav = ({ cityName }) => {
    const searchRef = useRef(null)
    const navgate = useNavigate()

    return (
        <>
            <Grid columns={24} gap={8}>
                <Grid.Item span={3}>
                    <div onClick={() => navgate("/city")} style={{
                        position: "relative",
                        top: "10px",
                        left: "5px"
                    }}>  {cityName}</div>
                </Grid.Item>
                <Grid.Item span={21}>
                    <div> <CommonSearchBar /></div>
                </Grid.Item>
            </Grid>
        </>
    )
}

export default HeaderNav